<template>
  <div class="register">
    <div class="register_form">
      <div class="register_con">
        <span style="font-size:24px;margin: 10px 0px">请进行注册</span>
        <el-form ref="form" :model="registerForm" style="width:80%;">
          <!-- 输入用户名/邮箱 -->
          <el-form-item>
            <el-input
              placeholder="请输入用户名"
              v-model="registerForm.username">
              <i slot="prefix" class="el-input__icon el-icon-user"></i>
            </el-input>
          </el-form-item>
          <!-- 输入密码 -->
          <el-form-item>
            <el-input
              placeholder="请输入密码"
              v-model="registerForm.password"
              show-password>
              <i slot="prefix" class="el-input__icon el-icon-edit"></i>
            </el-input>
          </el-form-item>
          <!-- 输入邮箱号 -->
          <el-form-item>
            <el-input
              placeholder="请输入邮箱号"
              v-model="registerForm.email">
              <i slot="prefix" class="el-input__icon el-icon-edit"></i>
            </el-input>
          </el-form-item>
            <!-- 输入密码 -->
          <el-form-item>
            <el-input
              placeholder="请输入姓名"
              v-model="registerForm.name">
              <i slot="prefix" class="el-input__icon el-icon-edit"></i>
            </el-input>
          </el-form-item>
    
          <!-- 登录/注册按钮 -->
          <el-form-item style="text-align: center"> 
            <el-button style="width:45%;" type="primary" @click="register">注册</el-button>
            <el-button style="width:45%;"  @click="toLogin">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Footer from '../components/footer.vue'
export default {
  data() {
    return {
      registerForm: {
        username: '',
        password: '',
        email: '',
        name: '',
      }
    }
  },
  components:{
    Footer
  },
  methods: {
    // 返回登录界面
    toLogin(){
      this.$router.push("/login")
    },
    // 注册
    register() {
      this.$axios.get('http://127.0.0.1:8000/api/register?body=' + JSON.stringify(this.registerForm))
        .then((res) => {
          console.log(res);
          if (res.data.msg == "success") {
            this.$router.push("/login")
          }
        })
    }
  }
}
</script>

<style >
.register{
  background: url('../assets/login_bg_24.jpg') center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  color: #666666;
  font-family: "宋体";

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.register_form{
  width: 30%;
  height: 55%;
  margin-top: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.register_con{
  background: rgb(255, 255, 255, 0.85);
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .36), 0 0 12px rgba(0, 0, 0, .12);

  display: flex;
  justify-content: center;
  align-items: center; 
  flex-direction: column;
}
</style>